<template>
  <section class="left-menu">
    <div class="menu-title">
      {{ menu_title }}
    </div>
    <el-menu :default-active="default_active">
      <template v-for="item in menu_list" :key="item.name">
        <template v-if="!item.hidden">
          <el-submenu
            :index="item.path"
            v-if="item.children && FnhasNotHidden(item)"
          >
            <template #title>{{ item.label }}</template>
            <template v-for="child in item.children" :key="child.name">
              <el-menu-item
                v-if="!child.hidden"
                :index="child.path"
                @click="FnChangeActive(child.name)"
              >
                {{ child.label }}
              </el-menu-item>
            </template>
          </el-submenu>
          <el-menu-item
            :index="item.path"
            v-else
            @click="FnChangeActive(item.name)"
          >
            {{ item.label }}
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </section>
</template>

<script>
import routes from '@/router.js'
import store from '@/store/index.js'
export default {
  data() {
    return {
      default_active: window.sessionStorage.getItem('SYSTEM') == 'eks-op' 
                      ? "/eks/goods" 
                      : window.sessionStorage.getItem('SYSTEM') == 'eci-op' ? "/eci/availableZone"
                      : "/cck/user",
      menu_title: window.sessionStorage.getItem('SYSTEM') == 'eks-op'
                      ? "容器云平台EKS" 
                      : window.sessionStorage.getItem('SYSTEM') == 'eci-op' ? "容器云平台ECI"
                      : "容器云平台CCK",
      menu_list: []
    }
  },
  mounted() {
    this.FnGetRouter()
  },
  methods: {
    FnChangeActive(name) {
      if (name == this.default_active) {
        this.$router.go(0)
      }
      this.$router.push({ name: name })
    },
    FnGetRouter() {
      this.menu_list.push(routes[0])
      routes.length && routes[0].children.forEach(item => {
        if (item.children && store.state.authRouterInfo[item.name]) {
          let child_list = []
          item.children.forEach(child => {
            if (child.children && store.state.authRouterInfo[child.meta.name] && store.state.authRouterInfo[child.meta.name].indexOf(child.name) !== -1) {
              let grandSonList = []
              child.children.forEach(grandSon => {
                grandSonList.push(grandSon)
              })
              if (grandSonList.length > 0) {
                child_list.push({
                  ...child,
                  children: grandSonList
                })
              } else if (store.state.authRouterInfo[child.meta.name]) {
                child_list.push(child)
              }
            }
          })
          this.menu_list.push({
            ...item,
            children: child_list
          })
        } else {
          if (store.state.authRouterInfo[item.name]) {
            this.menu_list.push(item)
          }
        }
      })
        console.log('+++++++++', this.menu_list)
    },
    FnhasNotHidden(item) {
      return item.children && item.children.some(val => !val.hidden)
    }
  },
  watch: {
    $route(newVal) {
      if (newVal) {
        this.default_active = this.$route.meta.path || this.$route.path
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.left-menu {
  height: 100%;
  .menu-title {
    height: 80px;
    line-height: 80px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid #e6e6e6;
  }
  .el-menu {
    height: calc(100% - 81px);
    text-align: center;
    border: none !important;
  }
}
</style>